<template>
<s-layout tabbar="/pages/xf/qylist">
  <view class="qylist-container">
    <view class="container">
      <!-- 标题和搜索框 -->
      <view class="card-header">
        <view class="search-box">
          <fui-icon name="search" :size="28" color="#999"></fui-icon>
          <input
            v-model="searchText"
            placeholder="搜索企业名称"
            class="search-input"
            @input="handleSearch"
          />
        </view>
      </view>

      <!-- 企业列表 -->
      <view
        v-for="(enterprise, index) in filteredEnterprises"
        :key="index"
        class="enterprise-list-item"
        @click="navigateToDetail(enterprise)"
      >
        <view class="card-header2">
          <!-- 企业头像 -->
          <view class="enterprise-list-avatar">
            <image
              :src="enterprise.avatar"
              mode="aspectFill"
              class="avatar"
            ></image>
          </view>
          <!-- 企业信息 -->
          <view class="enterprise-list-info">
            <text class="enterprise-list-name">{{ enterprise.name }}</text>
            <view class="info-item" v-if="enterprise.address">
              <fui-icon name="location" :size="28" color="#666"></fui-icon>
              <text class="info-text">{{ enterprise.address }}</text>
            </view>
          </view>
        </view>
      </view>
      <view style="height: 10rpx"></view>
    </view>
  </view>
</s-layout>
</template>

<script setup>
import { ref, computed } from "vue";

// 模拟企业数据
const enterprises = ref([]);

const searchText = ref("");

// 计算属性实现搜索功能
const filteredEnterprises = computed(() => {
  return enterprises.value.filter(enterprise => 
    enterprise.name.toLowerCase().includes(searchText.value.toLowerCase())
  );
});

// 跳转到企业详情页
const navigateToDetail = (enterprise) => {
  uni.navigateTo({
    url: `/pages/other/qydetails/qytail?id=${enterprise.id}`,
  });
};

// 搜索处理函数
const handleSearch = () => {
  // 搜索逻辑已通过计算属性实现
};
</script>

<style lang="scss" scoped>
.qylist-container {
  padding: 20rpx;
}

.container {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
}

.card-header {
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.enterprise-list-item {
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-radius: 8rpx;
  background-color: #f8f9fa;
}

.card-header2 {
  display: flex;
  align-items: center;
}

.enterprise-list-avatar {
  width: 100rpx;
  height: 100rpx;
  margin-right: 20rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.enterprise-list-info {
  flex: 1;
}

.enterprise-list-name {
  font-size: 26rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-text {
  font-size: 24rpx;
  color: #666;
  margin-left: 10rpx;
}

.search-box {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  margin-top: 20rpx;
}

.search-input {
  flex: 1;
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}
</style>
